<template>
  <el-dialog :visible.sync="showDialog" check-strictly size="tiny" custom-class="choose-class" @close="closeCallback">
    <span slot="title">
      <slot name="titleName"></slot>
      <span class="close pointer" @click="closeCallback"></span>
    </span>
    <div v-for="(item, index) in dataLists" :key="index" class="item-class">
      <div class="grade pointer" @click="iconClick(item)">
        <i class="el-icon-caret-right icon-grade"></i>
        <span>{{item.label}}</span>
      </div>
      <div v-show="item.showChild" v-for="(child, index) in item.children" :key="index" class="child-class">
        <span>{{child.label}}</span>
        <el-radio class="radio" v-model="classId" :label="child.id"></el-radio>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="floot-btn" type="primary" @click="submitCallback">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      classId: '' // 班级id
    }
  },
  props: {
    dataLists: { // 班级数据
      type: Array
    },
    showDialog: { // 对话框标识
      type: Boolean,
      default: false
    },
    closeCallback: { // 对话框关闭回调
      type: Function,
      default: function () {
        return function () {}
      }
    }
  },
  methods: {
    iconClick (obj) {
      this.$set(obj, 'showChild', !obj.showChild)
    },
    submitCallback () { // 确定回调
      let gradeId = 0
      this.dataLists.map(item => {
        item.children.find(classItem => {
          if (classItem.id === this.classId) {
            gradeId = item.id
          }
        })
      })
      this.$emit('update:showDialog', false)
      this.$emit('select', {gradeId: gradeId, classId: this.classId})
    }
  }
}
</script>
<style lang="less">
.choose-class {
  width: 300px;
  .el-radio__label {
    display: none;
  }
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 20px;
  }
  .item-class {
    font-size: 16px;
    padding: 0 20px;
    .child-class {
      display: flex;
      justify-content: space-between;
      padding: 0 10px 10px;
    }
    .icon-grade {
      font-size: 14px;
      margin-left: -14px;
      margin-right: 10px;
    }
    .grade {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }
  }
  .el-dialog__header {
    background: #437ed8;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    position: relative;
  }
  .el-dialog__headerbtn {
    font-size: 14px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  .el-dialog__footer {
    display: flex;
    justify-content: center;
  }
  .el-dialog__body {
    padding-bottom: 10px;
  }
  .floot-btn {
    width: 120px;
    background: #437ed8;
    border-color: #437ed8;
  }
}
</style>

